import React, { Component } from 'react';
import { Form, Input, Radio } from 'antd';
import { FormComponentProps } from 'antd/es/form';
import { addIcon, editIcon } from '@/services/appManage';
import ImageUpload from '@/components/ImageUpload';

interface IProps extends FormComponentProps {
  [propName: string]: any;
}

const config = {
  rules: [{ required: true, message: '不能为空!' }],
};

class FormContent extends Component<IProps> {
  public handlerChangeImgIds = (imageIds: string[]) => {
    this.props.form.setFieldsValue({ image_id: imageIds[0] });
  };

  public handlerSubmit = () =>
    new Promise((resolve: Function) => {
      this.props.form.validateFields((err: any, value: any) => {
        if (!err) {
          if (this.props.isEdit) {
            editIcon({
              ...value,
              role_id: this.props.client,
              id: this.props.itemData.id,
            }).then((resp: any) => {
              resolve(resp);
            });
          } else {
            addIcon({
              ...value,
              role_id: this.props.client,
            }).then((resp: any) => {
              resolve(resp);
            });
          }
        } else {
          //  window.console.log((err);
        }
      });
    });

  public ImageUploadRef: any;

  public render() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const radioData = [
      {
        value: true,
        label: '显示',
      },
      {
        value: false,
        label: '隐藏',
      },
    ];
    const { getFieldDecorator } = this.props.form;
    const { image_id, title, url, sort, status, image } = this.props.itemData;
    // console.log(image, 1111);
    let initFile: any;
    if (image) {
      initFile = [
        {
          uid: image?.id,
          url: image?.url,
        },
      ];
      // console.log(initFile);
    } else {
      initFile = undefined;
    }

    // console.log(this.props.itemData);
    return (
      <Form {...formItemLayout} onSubmit={this.handlerSubmit}>
        <Form.Item label="模块名称">
          {getFieldDecorator('title', {
            ...config,
            initialValue: title,
          })(<Input style={{ width: '300px' }} type="text" placeholder="请输入标题" />)}
        </Form.Item>
        <Form.Item label="模块图标">
          {getFieldDecorator('image_id', {
            ...config,
            initialValue: image_id,
          })(
            <ImageUpload
              defaultFileList={image ? initFile : undefined}
              ref={(node: any) => {
                this.ImageUploadRef = node;
              }}
              imageLength={1}
              handlerChangeImgIds={this.handlerChangeImgIds}
            />,
          )}
        </Form.Item>
        <Form.Item label="模块URL">
          {getFieldDecorator('url', {
            ...config,
            initialValue: url,
          })(<Input style={{ width: '300px' }} type="text" placeholder="请输入标题" />)}
        </Form.Item>
        <Form.Item label="排序位置">
          {getFieldDecorator('sort', {
            rules: [
              { required: true, message: '不能为空!' },
              {
                pattern: new RegExp(/^\d+$/),
                message: '排序值必须是数字',
              },
            ],
            initialValue: sort,
          })(<Input style={{ width: '300px' }} type="text" placeholder="请输入标题" />)}
        </Form.Item>
        <Form.Item label="是否显示">
          {getFieldDecorator('status', {
            ...config,
            initialValue: status,
          })(
            <Radio.Group>
              {radioData.map(item => (
                <Radio value={item.value} key={item.label}>
                  {item.label}
                </Radio>
              ))}
            </Radio.Group>,
          )}
        </Form.Item>
        <Form.Item label="客户端">
          {getFieldDecorator('role_id', {
            ...config,
            initialValue: this.props.client === 1 ? '家长端' : '教师端',
          })(<Input style={{ width: '300px' }} type="text" placeholder="请选择客户端" disabled />)}
        </Form.Item>
      </Form>
    );
  }
}

export default FormContent;
